<!--  -->
<template>
  <div class='' >
    <!-- 网关 -->
    <div v-if="extInnerID === 0">
      <div class="disContent">
        <div class="firLeft">id:</div>
        <div class="senRight">{{ extInnerData.id || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">公司id:</div>
        <div class="senRight">{{ extInnerData.comId || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">上传时间:</div>
        <div class="senRight">{{ extInnerData.time || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">分合闸:</div>
        <div class="senRight">{{ extInnerData.OnOff || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">电流高阈值 mA:</div>
        <div class="senRight">{{ extInnerData.iHi || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">电流突变 mA:</div>
        <div class="senRight">{{ extInnerData.iMut || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">温度高闽值 ℃:</div>
        <div class="senRight">{{ extInnerData.tHi || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">温度突变 ℃:</div>
        <div class="senRight">{{ extInnerData.tMut || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">485波特率:</div>
        <div class="senRight">{{ extInnerData.baud || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">Protoc1:协议表:</div>
        <div class="senRight">{{ extInnerData.protocl || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">报警发生:</div>
        <div class="senRight">{{ extInnerData.alm || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">用电量:</div>
        <div class="senRight">{{ extInnerData.eMut || '-' }}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">工作模式:</div>
        <div class="senRight">{{ extInnerData.mode === 0 ? '自动模式' : extInnerData.mode === 1 ? '手动模式' : '-'}}</div>
      </div>
    </div>
    <!-- 温湿度 -->
    <div v-if="extInnerID === 1">
      <div class="disContent">
        <div class="firLeft">氨气:</div>
        <div class="senRight">{{ extInnerData.aq || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气湿度:</div>
        <div class="senRight">{{ extInnerData.dqsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气温度:</div>
        <div class="senRight">{{ extInnerData.dqwd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">氮含量:</div>
        <div class="senRight">{{ extInnerData.trd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">电导率:</div>
        <div class="senRight">{{ extInnerData.trddl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">肥力:</div>
        <div class="senRight">{{ extInnerData.trfl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">磷含量:</div>
        <div class="senRight">{{ extInnerData.trl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤湿度:</div>
        <div class="senRight">{{ extInnerData.trsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤酸碱度:</div>
        <div class="senRight">{{ extInnerData.trsjd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤温度:</div>
        <div class="senRight">{{ extInnerData.trwd || '-'}}</div>
      </div>
    </div>
    <!-- 开关 -->
    <div v-else-if="extInnerID === 2">
      <el-form-item label="开关" prop="switchCount">
        <span>{{ extInnerData }}</span>
      </el-form-item>
    </div>
    <!-- 土壤温湿度 -->
    <div v-else-if="extInnerID === 3">
      <div class="disContent">
        <div class="firLeft">氨气:</div>
        <div class="senRight">{{ extInnerData.aq || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气湿度:</div>
        <div class="senRight">{{ extInnerData.dqsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气温度:</div>
        <div class="senRight">{{ extInnerData.dqwd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">氮含量:</div>
        <div class="senRight">{{ extInnerData.trd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">电导率:</div>
        <div class="senRight">{{ extInnerData.trddl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">肥力:</div>
        <div class="senRight">{{ extInnerData.trfl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">磷含量:</div>
        <div class="senRight">{{ extInnerData.trl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤湿度:</div>
        <div class="senRight">{{ extInnerData.trsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤酸碱度:</div>
        <div class="senRight">{{ extInnerData.trsjd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤温度:</div>
        <div class="senRight">{{ extInnerData.trwd || '-'}}</div>
      </div>
    </div>
    <!-- 秤 -->
    <div v-else-if="extInnerID === 4">
      <el-form-item label="秤" prop="switchCount">
        <span>{{ extInnerData }}</span>
      </el-form-item>
    </div>
    <!-- 氨气 -->
    <div v-else-if="extInnerID === 5">
      <div class="disContent">
        <div class="firLeft">氨气:</div>
        <div class="senRight">{{ extInnerData.aq || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气湿度:</div>
        <div class="senRight">{{ extInnerData.dqsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">大气温度:</div>
        <div class="senRight">{{ extInnerData.dqwd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">氮含量:</div>
        <div class="senRight">{{ extInnerData.trd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">电导率:</div>
        <div class="senRight">{{ extInnerData.trddl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">肥力:</div>
        <div class="senRight">{{ extInnerData.trfl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">磷含量:</div>
        <div class="senRight">{{ extInnerData.trl || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤湿度:</div>
        <div class="senRight">{{ extInnerData.trsd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤酸碱度:</div>
        <div class="senRight">{{ extInnerData.trsjd || '-'}}</div>
      </div>
      <div class="disContent">
        <div class="firLeft">土壤温度:</div>
        <div class="senRight">{{ extInnerData.trwd || '-'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 这里存放数据
    return {
      extInnerData: {},
      extInnerID: 0
    }
  },
  watch: {
    extObject: {
      handler (valA, valB) {
        this.extInnerData = valA
        console.log(this.extInnerData, 'object')
      },
      immediate: true
    },
    typeId: {
      handler (valA, valB) {
        this.extInnerID = valA
        console.log(this.extInnerID, 'id')
      },
      immediate: true
    }
  },
  props: {
    typeId: {
      type: Number,
      default: 0
    },
    extObject: {
      type: Object,
      default: () => {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .disContent {
    width: 90%;
    display: flex;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
    padding: 5px 20px;
    .firLeft {
      width: 120px;
    }
    .senRight {
      width: auto;
      color: #c8c7cc;
    }
  }
</style>
